@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: block;
  font-style: normal;
  font-named-instance: "Regular";
  src: url("/fonts/Inter-roman.var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: block;
  font-style: italic;
  font-named-instance: "Italic";
  src: url("/fonts/Inter-italic.var.woff2") format("woff2");
}

@layer base {
  :root {
    --white: 0 0% 100%;

    --gray-50: 258 16% 94%;
    --gray-100: 258 14% 91%;
    --gray-200: 258 12% 83%;
    --gray-300: 258 10% 71%;
    --gray-400: 258 10% 57%;
    --gray-500: 258 10% 45%;
    --gray-600: 258 10% 36%;
    --gray-700: 258 12% 29%;
    --gray-800: 258 14% 24%;
    --gray-850: 258 14% 17%;
    --gray-900: 258 21% 9%;
    --gray-950: 273 52% 4%;

    --background: var(--white);
    --foreground: var(--gray-950);

    --muted: var(--gray-50);
    --muted-foreground: var(--gray-500);

    --popover: var(--white);
    --popover-foreground: var(--gray-950);

    --tooltip: var(--gray-950);
    --tooltip-foreground: var(--white);

    --card: var(--white);
    --card-foreground: var(--gray-950);

    --border: var(--gray-100);
    --border-emphasized: var(--gray-200);
    --input: var(--gray-100);
    --input-active: var(--gray-200);

    --primary: 330 81% 60%;
    --primary-foreground: var(--white);

    --secondary: var(--gray-100);
    --secondary-foreground: var(--gray-950);

    --accent: var(--gray-50);
    --accent-foreground: var(--gray-950);

    --destructive: 358 75% 59%;
    --destructive-foreground: 2 100% 98%;

    --success: 142 71% 45%;
    --success-foreground: 210 40% 98%;

    --warning: 41 96% 40%;

    --ring: 215 20.2% 65.1%;

    --chart-primary: 199 89% 48%; /* sky blue */
    --chart-primary-gradient: 200 100% 90%;

    --radius: 0.5rem;
  }

  .dark {
    --background: var(--gray-950);
    --foreground: 300 5% 96%;

    --muted: var(--gray-850);
    --muted-foreground: var(--gray-400);

    --popover: var(--gray-900);
    --popover-foreground: var(--gray-50);

    --tooltip: var(--gray-50);
    --tooltip-foreground: var(--gray-950);

    --card: var(--gray-900);
    --card-foreground: var(--gray-50);

    --border: var(--gray-850);
    --border-emphasized: var(--gray-700);
    --input: var(--gray-850);
    --input-active: var(--gray-800);

    --primary: 330 81% 60%;
    --primary-foreground: var(--gray-50);

    --secondary: var(--gray-850);
    --secondary-foreground: var(--gray-50);

    --accent: var(--gray-850);
    --accent-foreground: var(--gray-50);

    --destructive: 358 75% 59%;
    --destructive-foreground: 2 100% 98%;

    --success: 131 41% 46%;
    --success-foreground: 120 61% 85%;

    --warning: 45 93% 47%;

    --ring: var(--gray-400);

    --chart-primary-gradient: 200 100% 15%;
  }
}

@layer utilities {
  .scrollbar-custom {
    @apply transition-colors scrollbar-thin scrollbar-thumb-stone-300 scrollbar-thumb-rounded-md hover:scrollbar-thumb-stone-400 dark:scrollbar-thumb-secondary/80 dark:hover:scrollbar-thumb-muted;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply scrollbar-custom bg-background text-foreground;
  }
  .table-action {
    @apply border border-transparent group-hover:border group-hover:border-border group-hover:bg-background data-[state=open]:border data-[state=open]:border-border data-[state=open]:bg-background group-hover:hover:bg-accent/50;
  }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"] {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield !important;
  }
}

.animation {
  animation: bounce 0.6s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(10px, 0, 0);
  }
}

pre[class*="language-"] code {
  display: block;
}

.tiptap p.is-editor-empty:first-child::before {
  @apply text-muted-foreground;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.monaco-editor {
  position: absolute !important;
}

.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar,
.graphiql-plugin,
.graphiql-tabs {
  @apply scrollbar-custom;
}

.monaco-editor .highlighted-line {
  background-color: #ffff00;
  border-left: 3px solid #ff0000;
}

.monaco-editor .lines-content.monaco-editor-background {
  margin-left: 8px;
}
